<template>
	<div class="withdraw">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				提取
			</div>
		</div>
		<div class="w-way border-1px" 
			v-if="accountList.status === 0"
			@click="goAccount()"
		>
			<img src="../assets/img/alipay.png" />
			<div class="w-way-right">
				<p class="alipay">支付宝</p>
				<p>还没有添加支付宝账户，请点击添加</p>
			</div>
			<i class="iconfont">&#xe6a7;</i>
		</div>
		<div class="w-ways border-1px" v-if="accountList.status !== 0">
			<img src="../assets/img/alipay.png" />
			<div class="w-way-right" 
				@click="goAccount()"
			>
				<p class="alipay">{{accountList.name}}</p>
				<p>{{accountList.withdraw_to}}</p>
			</div>
		</div>
		<div class="w-money">
			<input type="text" 
				v-model.trim="money"
				placeholder="请输入提取金额">
		</div>
		<div class="w-ava">
			当前可提取{{name}}： <span>{{credit}}</span>
		</div>
		<div class="w-btn"
			@click="withdraw()"
		>
			确认提取
		</div>
		<div class="w-tips">
			<h1>温馨提示</h1>
			<div class="w-tips-content" v-html="withdraw_intro"></div>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				money: '',
				withdraw_intro: '',
				accountList: [],
				name: window.localStorage.getItem('jifenbao_name'),
				credit: this.$route.query.credit
			}
		},
		mounted(){
			this.getIntro()
			this.getAccount()
		},
		methods: {
			withdraw: function(){
				var params = new URLSearchParams();
                params.append('money', this.money);
                axios.post(Http.WITHDRAW, params).then( res => {
                	var ret =res.data;
                	var recode = ret['code']
                	if(recode === 1){
                		Toast(ret['msg']);
                	}else{
                		Toast(ret['msg'])
                	}
                })
			},
			goAccount: function(){
				this.$router.push('/user/account')
			},
			getAccount: function(){
				axios.post(Http.ALIPAYACCOUNT)
				.then( res => {
					var ret = res.data;
					this.accountList = ret.data;
				})
			},
			getIntro(){
				axios.post(Http.INDEXDATA)
	            .then( res => {
	                var ret = res.data;
	                this.withdraw_intro = ret['data']['appcfg']['withdraw_content'];
	            })
			}
		}
	}
</script>
<style lang="scss" scoped>
	.withdraw{
		background: #f5f5f5;
		.w-way{
			margin: 4%;
			padding: 0.24rem;
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 0.1rem;
			box-shadow: 0 0 0.1rem #e1e1e1;
			img{
				width: 0.88rem;
				height: 0.88rem;
				margin-right: 0.2rem;
			}
			.w-way-right{
				font-size: 0.26rem;
				text-align: left;
				.alipay{
					font-size: 0.30rem;
					margin-bottom: 0.1rem;
					font-weight: bold;
				}
			}
			.iconfont{
				width: 1.2rem;
				height: 1.2rem;
				line-height: 1.2rem;
				font-size: 0.5rem;
			}
		}
		.w-ways{
			margin: 4%;
			padding: 0.24rem;
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 0.1rem;
			box-shadow: 0 0 0.1rem #e1e1e1;
			img{
				margin-left: 20%;
				width: 0.88rem;
				height: 0.88rem;
				margin-right: 0.2rem;
			}
			.w-way-right{
				font-size: 0.26rem;
				text-align: left;
				.alipay{
					font-size: 0.28rem;
					margin-bottom: 0.1rem;
					font-weight: bold;
				}
			}
		}
		.w-money{
			margin: 4%;
			height: 0.88rem;
			input{
				width: 100%;
				height: 0.88rem;
				background: #fff;
				text-indent: 0.2rem;
			}
		}
		.w-ava{
			margin: 4%;
			width: 92%;
			text-align: left;
			font-size: 0.26rem;
			span{
				font-size: 0.28rem;
				color: #ff3d00;
			}
		}
		.w-btn{
			margin: 4%;
			height: 0.88rem;
			line-height: 0.88rem;
			background: #fff;
			border-radius: 0.1rem;
			color: #1aaceb;
		}
		.w-tips{
			text-align: left;
			margin: 4%;
			padding-bottom: 2rem;
			h1{
				font-size: 0.28rem;
				margin-bottom: 0.2rem;
			}
		}
	}
</style>